<template>
  <div class="audit_detail">
    <div class="content_panel">
      <div class="panel_list">
        <user-order-info :user-data="data.personalInfo" :is-not-match="isNotMatch" :not-match-name="notMatchName">用户/订单信息</user-order-info>
        <other-info :user-data="data.otherInfo" :user-bioassay-info="data.userBioassayInfo" ref="otherInfo" :user-id="userId" :order-nid="orderId">{{$t('xsDetails.materialInfo')}}</other-info>
        <his-tel-record :update-type="updateTableType" @updateOver="updateTable('')" >历史电调情况</his-tel-record>
      </div>
    </div>
    <div class="operation_panel" v-if="checkStatus == 1">
      <tel-operation-records :user-data="data.telRecordPanel" :show-panel="showPanel" :is-not-match="isNotMatch" @updateTable="updateTable">电核记录</tel-operation-records>
    </div>
  </div>
</template>

<script>
  import storage from '@/libs/storage';
  import userOrderInfo from './user-order-info';
  import hisTelRecord from './his-tel-record';
  import telOperationRecords from './tel-operation-records';
  import otherInfo from './other-info';
  export default {
    name: 'telDetail',
    props: {
      showPanel: {
        type: Boolean,
        default: true
      }
    },
    components: {
      userOrderInfo,
      hisTelRecord,
      telOperationRecords,
      otherInfo
    },
    data() {
      return {
        checkStatus: this.$route.params.checkStatus,
        userId: storage.get('userId'),
        locale: storage.get('locale'),
        orderId: storage.get('orderNid'),
        updateTableType: '',
        data: {
          personalInfo: {
            account: '',
            bankName: '',
            realName: '',
            cardId: '',
            age: '',
            phone: '',
            sex: '',
            province: '',
            city: '',
            district: '',
            address: '',
            contactFirst: '',
            relationshipFirst: '',
            phoneFirst: '',
            contactSecond: '',
            relationshipSecond: '',
            phoneSecond: '',
            contactThird: '',
            relationshipThird: '',
            phoneThird: '',
            contactFourth: '',
            relationshipFourth: '',
            phoneFourth: '',
            // 新增两个联系人
            companyName: '', // 新增公司名称
            bankAccountHolderName: '',
            accountName: '', // 收款账户姓名
            cardPositiveImg: '', // 身份证正面
            cardImg: '', // 手持身份证
            userCardInfoIsChange: '', // OCR新增身份证正面照片
            ocrUrl: '', // OCR图片地址
            whatsApp:''
          },
          telRecordPanel: {
            phone: '',
          },
          otherInfo: {
            // account: '',
            // accountId: '',
            // accountName: '',
            // bankAccountHolderName: '',
            // bankCode: '',
            // bankName: '',
            // validStatus: '',
            bankCardImg: '',
            creditCardImg: '',
            cardPositiveImg: '',
            cardNegativeImg: '',
            cardImg: '',
            driverLicenseImg: '',
            familyCardImg: '',
            url: '',
            videoUrl: '',
            matchStatus: '',
            furtherCardIdImg: '',
            furtherImgOne: '',
            furtherImgTwo: '',
            ocrUrl: '',
            userCardInfoIsChange: '',

            empCarImg: '',
            payrollImg: '',
            proofEmpImg: '',
            taxCardImg: '',
            socialSecCardImg: '',
            graduationCertificateImg: '',
            stuCardImg: '',
            staffImg: '',
            depositSlipImg: '',
            otherImg: '',
            drivingLicenseImg: '',// 338新增 行驶证
          },
          userBioassayInfo: {
            cashStatus: '',
            url: '',
            status: '',
            matchStatus: ''
          },
        },
        isNotMatch: false,
        notMatchName: '',
      };
    },
    methods: {
      getUserInfo() {
        // 获取用户信息
        const params = {
          orderId: this.orderId,
          id: this.userId,
        };
        this.$api.customer.findUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if (status === '1' && error === '00000000') {
            const {
              userBaseInfo,
              userCardInfo,
              userInfo,
              userContactsInfo,
              userAccountInfo,
              userJobInfo ,
              userBioassayInfo,userMoreInfomationInfo,userVideoInfo,userSupplementInfo
              } = data;
            this.mergeData(this.data.personalInfo, userCardInfo);
            this.mergeData(this.data.personalInfo, userBaseInfo);
            this.mergeData(this.data.personalInfo, userInfo);
            this.mergeData(this.data.personalInfo, userCardInfo);
            this.mergeData(this.data.personalInfo, userAccountInfo);
            this.mergeData(this.data.personalInfo, userContactsInfo);
            this.mergeData(this.data.personalInfo, userJobInfo[0]);
            this.mergeData(this.data.telRecordPanel, userInfo);
            // 用于展示是否与ocr照片一致，不一致则显示，一致则不显示
            this.data.personalInfo.userCardInfoIsChange = data.userCardInfoIsChange;
            // 材料信息数据
            this.mergeData(this.data.otherInfo, userBaseInfo);
            this.mergeData(this.data.otherInfo, userCardInfo);
            this.mergeData(this.data.otherInfo, userVideoInfo);
            this.mergeData(this.data.otherInfo, userSupplementInfo);
            this.mergeData(this.data.otherInfo, userJobInfo[0]);
            // 用于展示是否与ocr照片一致，不一致则显示，一致则不显示
            this.data.otherInfo.userCardInfoIsChange = data.userCardInfoIsChange;
            this.mergeData(this.data.userBioassayInfo, userBioassayInfo);
          }
        });
      },
      mergeData(target, source) {
        // 合并数据
        if (!source || typeof source !== 'object') {
          return;
        }
        Object.keys(target).forEach((key) => {
          if (!target[key] && source[key]) {
            target[key] = source[key];
          }
        });
      },
      updateTable(val) {
        this.updateTableType = val;
      },
      // 判断是否不匹配订单
      querySpecialOrder() {
        const params = {
          orderId: this.orderId,
        };
        this.$api.tel.querySpecialOrder(params).then((res) => {
          const { status, data, error } = res;
          if (status === '1' && error === '00000000') {
            this.isNotMatch = !!((data && data.type && data.type === 'NAME_NOT_MATCH'));
            this.notMatchName = (data && data.bankRetainName) ? data.bankRetainName : '';
          }
        });
      }
    },
    created() {
      if (this.$route.params.id) {
        this.userId = this.$route.params.id;
        this.orderId = this.$route.params.orderId;
        this.getUserInfo();
        this.querySpecialOrder();
      }
    }
  };
</script>
<style lang="scss">
  @import "~@/assets/scss/function";
  [data-page=tel-detail]{
    .el-col.el-col-24 {
      line-height: 25px;
    }
    .el-tooltip__popper{
      max-width: 300px;
      word-break: break-all;
      background-color: #fff;
      box-shadow: 0px 0px 5px #ccc;
      color: #000;
    }
    .telPagination {
      padding-bottom: 20px;
      float: right;
    }
    .opacity_panel{
      opacity: 0.7;
    }
    .detail_module_panel{
      padding: 0 12px;
    }
    .detail_panel_title_icon{
      background-repeat: no-repeat;
      background-position: left center;
      background-size: 20px 20px;
    }
    .detail_panel_title{
      padding-left: 32px;
      margin: 0;
      font-size: 14px;
      height: 52px;
      line-height: 52px;
      border-bottom: 1px solid $colorSplit;
    }
    .panel_info_content{
      padding: 20px 0;
      .row{
        margin-bottom: 12px;
        &:last-child{
          margin-bottom: 0;
        }
      }
      .label{
        color: #a6a8aa;
        font-size: 12px;
        text-align: right;
        padding: 0 8px;
      }
      .info{
        font-size: 12px;
        padding: 0 8px;
      }
      .imgs{
        li{
          display: inline-block;
          width: 200px;
          margin-right: 24px;
          border: 1px solid $colorSplit;
          border-radius: 8px;
          overflow: hidden;
          a{
            display: block;
            height: 112px;
            width: 100%;
            background-color: #e5e5e5;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
          }
          .img_desc{
            height: 32px;
            line-height: 32px;
            padding: 0 16px;
          }
        }
      }
    }
    .panel_info_content_title{
      color: #5e6061;
      font-size: 14px;
      .dot{
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #5e6061;
        margin-right: 10px;
        margin-bottom: 2px;
      }
    }
    // 历史贷款信息列表
    .loan_history_table{
      th{
        background-color: #f4f5f6;
      }
    }
    // 个人信息icon
    .personal_info_icon{
      background-image: url("~@/assets/img/icon_personal_info.png");
    }
    // 工作/学生信息icon
    .work_student_icon{
      background-image: url("~@/assets/img/icon_work_student.png");
    }
    // 材料信息icon
    .other_info_icon{
      background-image: url("~@/assets/img/icon_other_info.png");
    }
    // 联系人icon
    .contacts_icon{
      background-image: url("~@/assets/img/icon_contacts.png");
    }
    // 操作面板
    .el-select{
      width: 100%;
    }
    .el-form-item__label{
      font-size: 12px;
      line-height: 17px;
      color: #a6a8aa;
      padding-bottom: 8px;
    }
    .el-form-item{
      margin-bottom: 16px;
    }
    .el-button--mini {
      padding: 5px 10px;
    }
    .info.contact.el-col.el-col-16 {
      text-align: center;
    }
    .el-form-item__content {
      line-height: 23px;
    }
  }
</style>
<style lang="scss" scoped>
  @import "~@/assets/scss/function";
  .audit_detail{
    display: flex;
    height: 100%;
    width: 100%;
  }
  .content_panel{
    flex: 1;
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  .operation_panel{
    width: 560px;
    background-color: #fff;
    /*padding: 16px;*/
    overflow: auto;
    box-shadow: -1px 0 4px 0 rgba(0, 0, 0, 0.05);
  }
  .panel_list{
    background-color: #fff;
    flex: 1;
    overflow: auto;
  }
  .placeholder{
    height: 212px;
    position: relative;
    margin: 0 -16px 0;
    overflow: visible;
  }
  .tables{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: $colorBg;
    height: 500px;
  }
  .tabs{
    background-color: $primary;
    position: relative;
    li{
      display: inline-block;
      a{
        color: rgba(255, 255, 255, 0.6);
        display: block;
        padding: 0 24px;
        height: 44px;
        line-height: 44px;
        position: relative;
        &.active{
          color: #fff;
          .detail_menu_icon{
            display: block;
          }
        }
        .detail_menu_icon{
          display: none;
          position: absolute;
          bottom: -7px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 20px;
          color: #f4f5f6;
        }
      }
    }
    .detail_tables_icon, .hide_tables_icon{
      position: absolute;
      top: 0;
      right: 0;
      height: 44px;
      line-height: 44px;
      width: 56px;
      color: #fff;
      font-size: 25px;
      cursor: pointer;
      text-align: center;
      &.rotate{
        transform: rotate(180deg);
      }
    }
    .hide_tables_icon{
      right: 70px;
    }
  }
</style>
